组件化的发展过程
基于命名空间的多入口文件组件
- jquery插件,一个js 一个css
 
基于模块的多入口文件组件
- amd js,css
 
单JavaScript入口组件
WebComponent
- 自定义元素
 - HTML模板
 - Shadow DOM
 - HTML import
 - lit from polymer
 
React 组件化
组件实现方式
- React.createClass
 - ES6 Class
 - 无状态函数
 - Hooks
 
组件生命周期
组件复用
- mixin(早期特性)
 - Decorator
 - HOC——是一个以组件为参数的函数
- displayName
 - 用途
- 操作props
 - 通过ref访问组件实例
 - 组件状态提升
 - 用其他元素包裹组件
 
 - 实现方式
- 属性代理
 - 反向继承
- 渲染劫持
 - 控制state
 
 
 
 
组件间通信
- props
 - 回调函数
 - 自定义事件
 - Context
 - EventBus
 
组件调试
React Developer Tools
React Context DevTool
Redux DevTools
why-did-you-update
ReactPerf
组件性能优化
- 纯函数
 - PureRender(shouldComponentUpdate)
 - shouldComponentUpdate
 - react-addon-perf
 
组件测试
react-addons-test-util
Enzyme
Jest
- 浅渲染
 - 全渲染
- JSDOM
 - Cheerio
 - Karma
 
 
Vue 组件化
小程序组件化
最后更新: 2022年03月02日 03:32
原始链接: http://rawbin-.github.io/modules/2018-12-11-fe-component/